---
type: tutorial
title: 将你的网站部署到网络
description: |-
  教程：搭建你的 Astro 博客 —
   将教程项目的 GitHub 仓库连接到 Netlify 并部署到网络
---
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

<PreCheck>
  - 将你的 GitHub 仓库添加为新的 Netlify 应用程序
  - 将你的 Astro 网站部署到网络
</PreCheck>

在这里，你会将 GitHub 仓库连接到 Netlify。每次你提交代码更改时，Netlify 都会使用该项目在网络上实时构建和部署你的站点。

:::tip[我们将使用……]
本教程将使用 **Netlify**，但你可以使用任何你喜欢的网站托管服务来将你的站点部署到网络。
:::

## 创建一个新的 Netlify 站点

<Steps>
1. 如果你还没有账号，请在 [Netlify](https://netlify.com) 创建一个免费账号。

     记下你的用户名。你可以在 `https://app.netlify.com/teams/username` 查看仪表板和你创建的网站

2. 单击<kbd>Add new project</kbd> > <kbd>Import an existing project</kbd>。

     系统会要求你连接到 Git 提供商。选择 GitHub 并按照屏幕上的步骤验证你的 GitHub 账号。然后，从提供的列表中选择你的 Astro 项目的 GitHub 仓库。

3. 在最后一步，Netlify 将向你显示应用程序的站点设置。对于你的 Astro 项目，默认值应该是正确的，因此你可以向下滚动并单击 <kbd>Deploy site</kbd>。
</Steps>

恭喜你拥有一个 Astro 网站！

## 更改你的项目名称

在 Netlify 中你网站的预览页面上，你将看到随机生成的项目名称，以及格式为`https://project-name-123456.netlify.app`的网站 URL。你可以将项目名称更改为更容易记住的名称，这个操作将会自动更新你的 URL。

## 访问你的新网站

单击站点设置中的 URL，或将其输入在浏览器地址栏来查看你的新网站。

<Box icon="question-mark">

### 小测试

你现在想更新现有网站的主页。应该采取以下哪些步骤？

  <MultipleChoice>
    <Option>
      打开一个终端，运行 `create astro`，然后访问我的 Netlify URL。
    </Option>
    <Option>
      在 Netlify 应用程序中更改我的设置，然后在 Astro.new 上开始一个新的 Astro 项目。
    </Option>
    <Option isCorrect>
      对 `index.astro` 进行编辑。将更改提交并推送到 GitHub。Netlify 将处理剩下的事情！
    </Option>
  </MultipleChoice>
 </Box>

<Box icon="check-list">

## 任务清单

<Checklist>
- [ ] 我可以在线查看我更新后的网站。
- [ ] 我准备好去编写代码了！
</Checklist>
</Box>

### 相关资源

- <p>[在 Netlify 上进行部署的详细指南](https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/) <Badge class="neutral-badge" text="外部链接" /></p>
